<template>
	<div>
		<div class="return-bar" @click="back()">
			<i class="iconfont">&#xe668;</i>
			我的红包
		</div>

		<div class="search cbox detail_top">
			<dl class="cbox nptype w100">
				<dd  v-bind:class=" {'on': status == 1 } "  @click="setSta(1)">未领取</dd>
				<dd  v-bind:class=" {'on': status == 2 } "  @click="setSta(2)">已领取</dd>
				<dd  v-bind:class=" {'on': status == 3 } "  @click="setSta(3)">已过期</dd>
			</dl>
		</div>

		<div class="top1 cCon">
      <Coupon :items="list" objtype="2" ></Coupon>
		</div>

	</div>
</template>

<script>
import api from "../../data/api";
import Coupon from "../../components/coupon";

var vm = this;
export default {
  data() {
    return {
      status:1,
      list: []
    };
  },

  components: {
    Coupon
  },

  methods: {

    back() {
      this.$route.router.go("/user");
    },
    setSta(key){
      if(this.status == key) return;
      this.status = key;

      this.getRedpack();
    },
    async getRedpack(){
      var res = await api.user.get_redpack({type:this.status});
      if(res.code == 10055){
        this.$route.router.go("/login?from=redpack");
      }
      this.list = res.data || [];
    }
  },
  route: {
    activate(transition) {
      transition.next();
      vm = this;
      vm.getRedpack();
    }
  }
};
</script>



<style lang="scss" scoped>
.search {
  .w100 {
    width: 100%;
  }
}

.top1 {
  margin-top: 2.5rem;
}

.cCon {
  padding: 10px;
  background-color: #f4f8fb;
}
</style>
